<template>
	<uiwu-popup v-model="showTips" @close="emits('update:modelValue')">
		<view class="uiwu-popup uiwu-ios" @tap.stop>
			<view class="uiwu-popup-header uiwu-flex-center">
				<text class="name">规则说明</text>
				<uiwu-icon type="closeempty" color="#FFF" size="24" @click="emits('update:modelValue')"></uiwu-icon>
			</view>
			<view class="uiwu-popup-content">
				<view class="title">{{titleText}}</view>
				<view class="tips" v-html="textWord"></view>
			</view>
		</view>
	</uiwu-popup>
</template>

<script setup lang="ts">
	import { onMounted, ref } from "vue"
	import { agreement } from "../../api/api";
	import { uiwu } from "../../config/config";
	const showTips = ref<boolean>(true)
	const emits = defineEmits(['update:modelValue'])
	const textWord = ref(null);
	const titleText = ref(null)
	const getAgreement = async () : Promise<any> => {
		const {data} = await agreement(3);
		data.content = uiwu.richtext(data.content)
		textWord.value = data.content
		titleText.value = data.title
	}
	onMounted(()=>{
		getAgreement()
	})
</script>

<style lang="scss">
	.uiwu-popup{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		&-header{
			width: 100%;
			height: 100rpx;
			background: #231815;
			padding-right: 28rpx;
			.name{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				flex: 1;
				padding-left: 40rpx;
			}
		}
		&-content{
			background-color: #fff;
			padding: 32rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #231815;
				margin-bottom: 20rpx;
			}
			.tips{
				font-size: 28rpx;
				font-weight: 500;
				color: #444444;
				min-height: 300rpx;
			}
		}
	}
</style>